<template>
  <div class="consumption_container">
    <div class="customer_info_container">
      <div class="grey_title_container">
        <span class="indicator"></span>
        <span class="text">顾客信息</span>
      </div>
      <div class="customer_info_content_container form_container">
        <el-row :gutter="17">
          <el-col :span="2" class="item">
            <div class="text_container">
              <span class="text">姓名:</span>
              <span class="text">吴晓晓</span>
            </div>
          </el-col>
          <el-col :span="2" class="item">
            <div class="text_container">
              <span class="text">性别:</span>
              <span class="text">女</span>
            </div>
          </el-col>
          <el-col :span="3" class="item">
            <div class="text_container">
              <span class="text">年龄:</span>
              <span class="text">30</span>
            </div>
          </el-col>
          <el-col :span="3" class="item">
            <div class="text_container">
              <span class="text">电话:</span>
              <span class="text">158****1245</span>
            </div>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container">
              <span class="text">地址:</span>
              <span class="text">上海市上海市长宁区</span>
            </div>
          </el-col>
          <el-col :span="3" class="item">
            <div class="text_container">
              <span class="text">客户等级:</span>
              <span class="text">金卡</span>
            </div>
          </el-col>
          <el-col :span="5" class="item">
            <div class="text_container">
              <span class="text">身份证:</span>
              <span class="text">255623*************1234</span>
            </div>
          </el-col>
          <el-col :span="2" class="item">
            <div class="text_container">
              <span class="text">咨询师:</span>
              <span class="text">安俊杰</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="product_list_container">
      <div class="grey_title_container">
        <span style="color: #00b6b9; font-size: 12px; margin-right: 20px;">收藏单号：SH01-C-20171212-0001</span>
        <span style="color: #00b6b9; font-size: 12px; margin-right: 20px;">成交时间：2017-12-12 16:00</span>
        <span style="color: #00b6b9; font-size: 12px;">付款时间：2017-12-12 16:00</span>
      </div>
      <div class="table_container">
        <el-table
          :data="products"
          :span-method="calProductSpan"
          :border="true">
          <el-table-column
            label="项目名称"
            align="center"
            width="200"
            prop="key1">
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.type === 1">
                  <span class="text">{{scope.row.key1}}</span>
                </div>
                <div v-if="scope.row.type === 2"
                     style="text-align: right; padding-right: 190px; padding-top: 15px; padding-bottom: 22px;">
                  <div>
                    <span class="text">订单总价:</span>
                    <span style="font-size: 18px; color: #ff5757;">￥20000.00</span>
                  </div>
                  <div style="margin-top: 15px;">
                    <span class="text">实付款:</span>
                    <span style="font-size: 18px; color: #ff5757;">￥20000.00</span>
                  </div>
                  <div>
                    <el-popover
                      ref="payMethod"
                      placement="right"
                      width="120"
                      trigger="click">
                      <div style="font-size: 11px; color: #666666;">么么贷:￥17900.00</div>
                      <div style="font-size: 11px; color: #666666; margin-top: 12px;">么么贷手续费:￥100.00</div>
                    </el-popover>
                    <el-button size="mini" type="text" v-popover:payMethod style="margin-top: 22px;">付款方式 ></el-button>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="项目类型"
            align="center"
            prop="key2"/>
          <el-table-column
            label="科室"
            align="center"
            prop="key3"/>
          <el-table-column
            label="原价（单价）"
            align="center"
            prop="key4"/>
          <el-table-column
            label="最终价（原价）"
            align="center"
            prop="key5"/>
          <el-table-column
            label="数量"
            align="center"
            prop="key6"/>
          <el-table-column
            label="最终价（总价）"
            align="center"
            prop="key7"/>
          <el-table-column
            label="已执行"
            align="center"
            prop="key8"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  @Component
  export default class Consumption extends Vue {
    products = [{
      key1: '超声逆龄提拉（面颈部）-1次',
      key2: '逆龄提拉-专家B套餐',
      key3: '皮肤',
      key4: 9800.00,
      key5: 9800.00,
      key6: 2,
      key7: 9800.00,
      key8: 2,
      type: 1
    }, {
      type: 2
    }];

    calProductSpan({row, column, rowIndex, columnIndex}) {
      if (row.type === 2) {
        if (columnIndex === 0) {
          return [1, 8];
        } else {
          return [0, 0];
        }
      }
    }
  }
</script>

<style scoped>
  .customer_info_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .customer_info_content_container {
    padding: 15px 10px;
  }

  .product_list_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }
</style>
